<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<title>在线翻译</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/translate.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="main">
			<div class="main_top">
				<span>西班牙语</span>
				<span>中文</span>
				<span class="translate" id="Click" name="Click">翻译</span>
				<img src="img/9@3x.png" alt="" />
			</div>
			<div class="main_content">
				<textarea id="srcText" name="srcText " placeholder="在此输入要翻译的文本"></textarea>
			</div>
		</div>

		<div class="success">
			<div class="success_content">
				<textarea id="dstText" name="dstText" readonly="readonly"></textarea>
			</div>
		</div>

		<div class="fail">
			输入错误&nbsp;请重新输入
		</div>
		<div class="fail_2">
			请输入翻译内容
		</div>
		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("#Click").click(function() {
				var contents = $("#srcText").val();
				var appid = '20180817000195270';
				var key = 'jKeC5h6CnniNgxZfBJwc';
				var salt = (new Date).getTime();
				var from = 'zh';
				var to = 'spa';
				var str1 = appid + contents + salt + key;
				var sign = MD5(str1);
				var myReg = /^[\u4e00-\u9fa5]+$/;
				if(myReg.test(contents)) {
					from = "zh";
					to = "spa"
				} else {
					from = "spa";
					to = "zh";
				}
				$.ajax({
					url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
					type: 'get',
					dataType: 'jsonp',
					data: {
						q: contents,
						appid: appid,
						salt: salt,
						from: from,
						to: to,
						sign: sign
					},
					success: function(data, json) {
						console.log(data.trans_result[0].dst);
						if(json.error_code && json.error_code != "54000") {
							$(".fail").show();
							setTimeout(function() {
								$(".fail").hide()
							}, 2000);

						}
						if(json.error_code == "54000") {
							$(".fail_2").show();
							setTimeout(function() {
								$(".fail_2").hide()
							}, 2000);
						}
						if(!json.error_code) {
							$(".success").show();
						}
						$("#dstText").text(data.trans_result[0].dst)
					}
				});
			});
		</script>
	</body>

</html>